<template>
    <div class="userinfo">
        <div class="toptab">
            <router-link to="/home">
                <span class="iconfont icon-arrow-left-bold"></span>
            </router-link>

            <!-- icon-shezhi -->
            <router-link to="/login">
                <span class="iconfont icon-shezhi"></span>
            </router-link>

        </div>

        <div class="hearinfo">
            <div class="hearimg">

            </div>
            <span class="hearid">66266952</span>
            <div class="hearvip">
                <img src="../assets/img/vip.png" alt="" style="width: 18px;height: 18px;">
                <span>开通终身大会员</span>
                <i class="iconfont icon-arrow-right-bold"></i>
            </div>
        </div>

        <div class="userinfomain">
            <div class="mainlist">
                <div class="userinfoimg" style="background-color: #f0fbf9;">
                    <img src="../assets/img/userinfo1.png" alt="" style="width: 33px;height: 33px;">
                </div>
                <p>装备</p>
                <span class="infonum">0/5</span>

            </div>

            <div class="mainlist">
                <div class="userinfoimg" style="background-color: #f4f7fe;">
                    <img src="../assets/img/userinfo2.png" alt="" style="width: 33px;height: 33px;">
                </div>
                <p>酷币</p>
                <span>90</span>

            </div>

            <div class="mainlist">
                <div class="userinfoimg" style="background-color: #fdf8ef;">
                    <img src="../assets/img/userinfo3.png" alt="" style="width: 33px;height: 33px;">
                </div>
                <p>酷币</p>
                <span>90</span>

            </div>

            <div class="mainlist">
                <div class="userinfoimg" style="background-color: #f8f3fd;">
                    <img src="../assets/img/userinfo4.png" alt="" style="width: 33px;height: 33px;">
                </div>
                <p>Coolab</p>
                <span class="infonum">soon</span>

            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.userinfo {
    background: #f4f4f4;
    width: 100%;
    // height: 100%;
    min-height: 667px;
    // padding: 15px;
    .toptab {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 35px;

        span {
            font-size: 20px;
            padding: 0 18px;
        }
    }

    .hearinfo {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 35px;

        .hearimg {
            background-color: #fafafa;
            width: 78px;
            height: 78px;
            border-radius: 50%;
            border: 5px solid #d6d6d6;
            background-image: url(../assets/img/hear.png);
            background-size: cover;
            background-position: center;
        }

        .hearid {
            font-size: 14px;
            font-weight: 700;
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .hearvip {
            display: flex;
            align-items: center;
            background-color: #f3e9d8;
            padding: 5px 12px;
            border-radius: 15px;
            color: #cfb285;
            font-size: 12px;

            span {
                padding: 0 5px;
                font-weight: 700;

            }
        }
    }

    .userinfomain {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        padding-top: 30px;

        .mainlist {
            width: 166px;
            height: 166px;
            background-color: #fff;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 8px 0;

            .userinfoimg {
                width: 60px;
                height: 60px;

                border-radius: 15px;
                display: flex;
                justify-content: center;
                align-items: center;

            }

            p {
                padding-top: 20px;
                padding-bottom: 10px;
                font-weight: 600;
            }

            span {
                color: #989898;
            }

            .infonum {
                padding: 1px 12px;

                border-radius: 15px;
                background-color: #f5f5f5;
            }
        }
    }

}
</style>